<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="wa">
    <title>千图网</title>
    <link rel="stylesheet" href="css/index.css">
    <style>

    </style>
</head>

<body>
    <div class="dingbu">
        <div class="top">
            <div class="topleft">
                <section class="a1">
                    <a href="#">QQ交谈</a>
                </section>
                <section class="a2">
                    <a href="#">官方QQ群</a>
                </section>
                <div class="a3"><a href="#">常见问题</a></div>
            </div>
            <div class="topright">
                <div class="b1"><a href="#">点我赚钱</a></div>
                <div><a href="#">注册</a></div>
                <div><a href="#">登录</a></div>
                <section class="b2"><a href="#">QQ登录</a></section>
                <section class="b3"><a href="#">微信登录</a></section>
            </div>
        </div>
        <div class="daohang">
            <a href="#"><img src="img/logo.png" alt=""></a>
            <ul>
                <li>首页</li>
                <li>广告设计</li>
                <li>淘宝设计</li>
                <li>素材分类</li>
                <li>千图灵感</li>
                <li>设计工具</li>
                <li class="c1">活动</li>
                <li class="c2">VIP特权</li>
            </ul>
            <!--<section style="clear: both;"></section>-->
        </div>
        <div class="hengfu">
            <img src="img/indexbg.jpg" alt="">
            <h2>专注免费设计素材网站</h2>
            <input type="text" value="800万张免费设计任意下载">
            <input id="btn1" type="button" value="搜全站">
            <input id="btn2" type="button" value="搜原创">
        </div>
        <div id="box">
            <ul class="list">
                <li class="current"><img src="img/lun1.jpg" alt=""></li>
                <li><img src="img/lun2.jpg" alt=""></li>
                <li><img src="img/lun3.png" alt=""></li>
                <li><img src="img/lun4.png" alt=""></li>
                <li><img src="img/lun5.png" alt=""></li>
                <li><img src="img/lun6.jpg" alt=""></li>
                <li><img src="img/lun7.jpg" alt=""></li>
                <li><img src="img/lun8.png" alt=""></li>
            </ul>
            <ul class="count">
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="subnav">
            <ul>
                <li>平面广告</li>
                <li>电商淘宝</li>
                <li>文档模板</li>
                <li>摄影图库</li>
                <li>网页UI</li>
                <li>多媒体</li>
                <li>空间建筑</li>
            </ul>
        </div>
        <div id="cata">
            <div class="renmen">
                <ul class="d1">
                    <li>热门</li>
                    <li>用途</li>
                    <li>背景</li>
                    <li>元素</li>
                </ul>
                <ul class="d2">
                    <li>新年</li>
                    <li>背景</li>
                    <li>鸡年</li>
                    <li>年货节</li>
                    <li>海报</li>
                    <li>名片</li>
                </ul>
                <ul class="d2">
                    <li>ppt</li>
                    <li class="ys">春节</li>
                    <li>图标</li>
                    <li>年会</li>
                    <li>科技</li>
                    <li>金鸡</li>
                </ul>
                <ul class="d2">
                    <li>底纹</li>
                    <li>主图</li>
                    <li>邀请函</li>
                    <li class="ys">新年海报</li>
                    <li>红色背景</li>
                    <li>LOGO</li>
                </ul>
                <ul class="d2">
                    <li>喜庆背景</li>
                    <li>底纹</li>
                    <li class="ys">中国风</li>
                    <li>企业文化</li>
                    <li>元旦</li>
                    <li>年会背景</li>
                </ul>
                <ul class="d2">
                    <li>蓝色背景</li>
                    <li>卡通</li>
                    <li>科技</li>
                    <li>2017日历</li>
                    <li>招聘</li>
                    <li class="ys">新年快乐</li>
                </ul>
            </div>
            <div class="youzhan">
                <div class="gonggao">
                    <ul>
                        <li>站内公告</li>
                        <li>QQ群联盟</li>
                        <li>媒体报道</li>
                        <li>用户评价</li>
                    </ul>
                    <!--<div class="fuli">-->
                    <p>2017年放假通知<strong>01-17</strong></p>
                    <p>千图网免费开通设计师接单店铺<strong>01-17</strong></p>
                    <!--</div>-->
                </div>
                <div class="sheji">
                    <span>设计师： 2,483万人&#x3000;&#x3000;占全国： 81%</span>
                    <span>素材总数：840万张     一周新增： 186,876张</span>
                    <span>概念师： 1,483万人&#x3000;&#x3000;占全国： 21%</span>
                    <section> 总下载数： 75,049万次 昨日下载： 1,109,743张 </section>
                </div>
            </div>
            <div class="gongji">
                <figure>
                    <img src="img/kaifashouce.png" alt="">
                    <figcaption>开发手册</figcaption>
                </figure>
                <figure>
                    <img src="img/UItubiaoku.png" alt="">
                    <figcaption>UI图标库</figcaption>
                </figure>
                <figure>
                    <img src="img/taobaogongju.png" alt="">
                    <figcaption>淘宝工具</figcaption>
                </figure>
                <figure>
                    <img src="img/peisegongju.png" alt="">
                    <figcaption>配色工具</figcaption>
                </figure>
                <figure>
                    <img src="img/wangyegongju.png" alt="">
                    <figcaption>网页工具</figcaption>
                </figure>
                <figure>
                    <img src="img/tubiaobao.png" alt="">
                    <figcaption>开发手册</figcaption>
                </figure>
                <figure>
                    <img src="img/huacebao.png" alt="">
                    <figcaption>图标宝</figcaption>
                </figure>
                <figure>
                    <img src="img/zaixianshufa.png" alt="">
                    <figcaption>画册宝</figcaption>
                </figure>
                <figure>
                    <img src="img/dianshangpeixun.png" alt="">
                    <figcaption>在线书法</figcaption>
                </figure>
                <figure>
                    <img src="img/dianpuzhuangxiudaima.png" alt="">
                    <figcaption>店铺装修代码</figcaption>
                </figure>
                <section>更多设计工具</section>
            </div>
            <div class="zhuanti">
                <h3>热门专题<a href="#">更多<img src="img/move.png" alt=""></a></h3>
                <div class="xiqing">
                    <figure>
                        <img src="img/re-1.jpg" alt="">
                        <figcaption>情人节限定集</figcaption>
                    </figure>
                    <figure>
                        <img src="img/re-2.jpg" alt="">
                        <figcaption>扁平化工作场景</figcaption>
                    </figure>
                    <figure>
                        <img src="img/re-3.jpg" alt="">
                        <figcaption>小年海报集</figcaption>
                    </figure>
                    <figure>
                        <img src="img/re-4.jpg" alt="">
                        <figcaption>喜庆元素背景集</figcaption>
                    </figure>
                    <figure>
                        <img src="img/re-5.jpg" alt="">
                        <figcaption>店铺装修集</figcaption>
                    </figure>
                </div>
            </div>
            <div class="youqin">
                <a href="#">友情链接</a>
                <a href="#">新素材</a>
                <a href="#">新搜索</a>
                <a href="#">热门素材</a>
                <a href="#">热门ppt素材</a>
                <a href="#">热门淘宝素材</a>
                <a href="#">热门装饰素材</a>
                <a href="#">热门专题</a>
                <a href="#">搜索地图</a>
            </div>
            <div class="guiqing">
                <li>大促销</li>
                <li>工作规划</li>
                <li>厨房模型大全</li>
                <li>芒果汁果汁 饮料</li>
                <li>招聘宣传单</li>
                <li>踏青放风筝扁平化海报</li>
                <li>吉祥物造型</li>
                <li>报名banner</li>
                <li>招聘海报</li>
                <li>雨衣活动页促销页装修</li>
                <li>可爱图标</li>
                <li>卡通海报背景素材</li>
                <li>正大中学效果图</li>
                <li>网站订单</li>
                <li>化妆品海报 女神节 女王节38促销立春</li>
                <li>玻璃温室</li>
                <li>酒文化-传统</li>
                <li>天道酬勤企业文化</li>
                <li>机油手机端首页</li>
                <li>和谐</li>
                <li>网站轮播图</li>
                <li>春装上新女神衣柜约会心机海报</li>
                <li>情人节首图</li>
                <li>微信海报木制品海报产品海报设计家居海报</li>
                <li>微信海报木制品海报产品海报设计家居海报</li>
                <li>酒文化窖藏</li>
                <li>文明</li>
                <li>淘宝天猫情人节海报图</li>
                <li>七夕情人节</li>
            </div>

        </div>
        <div class="dibu">
            <ul>
                <li>官方微博</li>
                <li>常见问题</li>
                <li>版权声明</li>
                <li>商务合作</li>
                <li>售后服务</li>
                <li>新素材</li>
                <li>图片下载</li>
                <li>素材专题</li>
                <li>千图导航</li>
            </ul>
            <img src="img/logo.png" alt="">
            <div class="qiye">
                <section>企业QQ交谈</section>客户电话：400-988-711</div>
            <div class="xh">千图网素材为用户免费分享产生，若发现您的权利被侵害，请联系tousu@58pic.com ，我们尽快处理 Copyright © <strong>2015</strong>千图网 沪ICP备10011451号-6 用时：0.0128
                0.548 秒<img src="img/favicon.png" alt="">上海工商</div>
            
        </div>
    </div>
</body>

</html>
<script>
    var box = document.querySelector('#box');
    var aLi = document.querySelectorAll('.list li');
    var aNum = document.querySelectorAll('.count li');
    // 记录当前显示的图片的索引
    var current = 0;
    // 保存定时器
    var timer = null;

    // 先写自动的
    timer = setInterval(autoPlay, 3000);
    function autoPlay() {
        current++;
        if (current >= aLi.length) {
            current = 0;
        }
        show(current);
    }

    // 手动的
    for (var i = 0; i < aNum.length; i++) {
        // 存储下标
        aNum[i].index = i;
        aNum[i].onmouseover = function () {
            show(this.index);
        }
    }

    // 处理图片的显示和隐藏
    function show(index) {
        // 手动改变时，需要更新current的值
        current = index;
        // 当前图片显示时，那么其他的图片应该隐藏
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].style.display = 'none';
            aNum[i].className = '';
        }
        // 让当前的图片显示
        aLi[index].style.display = 'block';
        // 改变图片对应的数字的状态
        aNum[index].className = 'current';
    }

    // 当鼠标移入box容器的时候，让autoPlay停止，鼠标移出的继续自动播放
    box.onmouseover = function () {
        clearInterval(timer);
    }
    box.onmouseout = function () {
        timer = setInterval(autoPlay, 1000);
    }

</script>